import {useState} from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Input,Button,Tabs,List } from 'antd-mobile/2x'
import Mock from 'mockjs'
import '../css/renminhao.css'


let abc= Mock.mock('@csentence(15,20)')
let f= Mock.mock('@csentence(7)')
let d= Mock.mock('@image(150x70)')
let t= Mock.mock('@string("number", 1,2)')
let g= Mock.mock('@string("number", 1,3)')



const Renminhao=()=>{
    const [key,setKey]=useState(1)
     return(
         
         <>
         
         <div className='main'>
             <Tabs onChange={key=>setKey(key)}>
                 <Tabs.Tab title='推荐' key='1' />
                 <Tabs.Tab title='关注' key='2' />
             </Tabs>
         </div>
         <div className='hct'>
         {key=='1'&&(
                       <List>
            <div className='yi'>
                <div className='zi'>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    <div className='i'>{g}评</div>
                </div>
                <div className='tu'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className='yi'>
                <div className='zi'>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    <div className='i'>{g}评</div>
                </div>
                <div className='tu'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className='yi'>
                <div className='zi'>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    <div className='i'>{g}评</div>
                </div>
                <div className='tu'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className='yi'>
                <div className='zi'>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    <div className='i'>{g}评</div>
                </div>
                <div className='tu'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        </List> 
         )}
          {key=='2'&&(
            <List>
                <div className='yi'>
                <div className='zi'>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    <div className='i'>{g}评</div>
                </div>
                <div className='tu'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
            </List>
          )}
         </div>
         </>
     )
}
export default Renminhao;